
<script setup lang="ts">
import type { ShoppingCartData } from '../../typings';
import { ref, toRefs, watch, computed } from 'vue'
import { useShoppingStore } from '../../stores/shopping'
import { useRouter } from 'vue-router'; 
const router = useRouter()
const { list,type } = defineProps<{
    list: ShoppingCartData,
    type?:string
}>()
// 自定义事件 用来做判断是否全部选项卡已选，如果已选 那就把父元素那边的全选按钮勾上
const emit = defineEmits(['changeSelectAll'])
const changeParentSelect = (flag: boolean) => {
    emit('changeSelectAll', flag)
}
// pinia 购物车列表
const { shoppingCartList } = toRefs(useShoppingStore())
const { changeShoppingCartList, } = useShoppingStore()
// 数量
const quantityNum = ref(list.num)
// 当前选项卡列表 用来做响应式 因为pinia的要刷新
const currentStatus = ref(list.selectedStatus)
watch(() => quantityNum.value, (n, o) => {

    if (n != o) {
        changeShoppingCartList({ num: n, stockId: list.stockId, type: 1 })
    }

})

watch(() => currentStatus.value, (n, o) => {
    if (n != o) {
        changeShoppingCartList({ selectedStatus: n, stockId: list.stockId, type: 0 })
        // 用来判断全部选项卡是否全部选上
            let flag = true
            shoppingCartList.value.map(item => {
                if (!item.selectedStatus) {
                    flag = false
                    changeParentSelect(flag)
                }
            })
            changeParentSelect(flag)
    }

})
watch(() => list.selectedStatus, (n) => {
    currentStatus.value = n
})

const goToProductDetails = ()=>{
    router.push({
        name:'productdetails',
        params:{
            id:list.itemId
        }
    })
}
</script>


<template>
    <div class="product-card flex justify-between items-start p-3">

        <div class="left flex items-center mr-2">
            <input v-show="!type" v-model="currentStatus" type="checkbox" class=" w-6 h-6 rounded-full mr-2">
            <img style=" width:72px ;height:100px" :src="list.img" alt="">
        </div>

        <div class="right-title  text-sm w-4/5"  @click="goToProductDetails">

            <span class=" text-black font-bold">{{ list.title }}</span>
            <p class="text-gray-400" :class="{'py-2':list.text!=''}">
                {{ list.styleKey }}:{{ list.currentColor }};{{ list.sizeKey }}:{{ list.curretnSize }};
            </p>

            <p v-show="list.text!=''" class=" flex justify-between"> <span>数量</span> <span>x{{ list.num }}</span> </p>

            <p style=" background-color: #ffe6e8;" class=" text-red-500 p-0.5 inline-block">{{ list.text }}</p>

            <div v-show="!type" class="flex justify-between items-center mt-1">
                <div class="price text-red-500 text-xs font-bold">
                    ￥<span class="text-lg">{{ list.nowprice.toFixed(2) }}</span>
                </div>
                <div class="quantity">
                    <van-stepper v-model="quantityNum" />
                </div>
            </div>
        </div>
    </div>
</template>